<template>
    <div>   
      <div class="col-xs-4 spanDateDiv">
          <span>期間</span> 
      </div>
      <div class="col-xs-8">
          <input type="button" id="kuaijimonth_btn" name="dateBtn" class="form-control model_kikanAxis_kuaijimonth" v-show="show_M" size="16" value="">
          <input type="button" id="ziranmonth_btn" name="dateBtn" class="form-control model_kikanAxis_ziranmonth" v-show="show_m" size="16"  value="" >
          <input type="button" id="week_btn" name="dateBtn" class="form-control model_kikanAxis_week" size="16" v-show="show_w" value="" >
          <input type="button" id="day_btn" name="dateBtn" class="form-control model_kikanAxis_day" size="16" v-show="show_d" value="" >
      </div>

    </div>
</template>
<script>
export default {
      name:'mdl_dateComponent',
      props:{
            dateType:{
                  type:Object,
                  required:true,
            },
            dataInfo:{
                  
            }
      },
      data:function(){
            //mdl
            return {
                  //日
                  startDay:'',
                  endDay:'',
                  maxDay:'',
                  minDay:'',
                  //周
                  startWeek:'',
                  endWeek:'',
                  maxWeek:'',
                  minWeek:'',
                  //自然月
                  startMaxMonth:'',
                  endMaxMonth:'',
                  maxMonth:'',
                  minMonth:'',
                  //会计月
                  startMoneyMonth:'',
                  endMoneyMonth:'',
                  maxMoneyMonth:'',
                  minMoneyMonth:'',
                  
                  show_M:true,
                  show_m:false,
                  show_w:false,
                  show_d:false,
                  yearWeekStr:'',
                  dateValue:'',
                  dataResponse:[],
                  //请求地址
                  urlList:{
                        getWeekInfo:'/mdlink/common/CGI/COMMON.WEEK_ALL.CGI',  //获取周期间的list
                        getDateDefault:'/mdlink/common/CGI/GET_DEFAULT_TIME.CGI'   /*获取画面默认期间范围ー*/
                  }
            }
      },
      watch:{
            //mdl
            dateInfo:{
                  handler(){
                        this.dateType = this.dateInfo.dateType;
                        this.dateValue = this.dateInfo.dateValue;
                  },
                  deep:true
            },
            dataResponse:{
                  handler(){
                        //日
                        this.startDay=this.dataResponse[0].startDay.toString();
                        this.endDay=this.dataResponse[0].endDay.toString();
                        this.maxDay=this.dataResponse[0].maxDay.toString();
                        this.minDay=this.dataResponse[0].minDay.toString();
                        //周
                        this.startWeek=this.dataResponse[1].startWeek.toString();
                        this.endWeek=this.dataResponse[1].endWeek.toString();
                        this.maxWeek=this.dataResponse[1].maxWeek.toString();
                        this.minWeek=this.dataResponse[1].minWeek.toString();
                        //自然月
                        this.startMaxMonth=this.dataResponse[2].startMaxMonth.toString();
                        this.endMaxMonth=this.dataResponse[2].endMaxMonth.toString();
                        this.maxMonth=this.dataResponse[2].maxMonth.toString();
                        this.minMonth=this.dataResponse[2].minMonth.toString();
                        //会计月
                        this.startMoneyMonth=this.dataResponse[3].startMoneyMonth.toString();
                        this.endMoneyMonth=this.dataResponse[3].endMoneyMonth.toString();
                        this.maxMoneyMonth=this.dataResponse[3].maxMoneyMonth.toString();
                        this.minMoneyMonth=this.dataResponse[3].minMoneyMonth.toString();
                        this.initDateComponents()
                  },
                  deep:true //深度监听
            },
            dateType:{
                  handler(){
                        this.show_M = this.dateType=="kuaijimonth"?true:false
                        this.show_m = this.dateType=="ziranmonth"?true:false
                        this.show_w = this.dateType=="week"?true:false
                        this.show_d = this.dateType=="day"?true:false
                  },
                  deep:true //深度监听
            }
      },
      methods:{
            //获取date初始化数据
            getInitDate(){
                  //外部this指向vm
                  var vm = this
                  this.$http.post(this.urlList.getDateDefault)
                        .then(function(response){
                              vm.dataResponse = response.data;                         
                        });
                  
            },
            //获取周信息
            getWeekDateInfo(){
                  var vm = this
                  this.$http.post(this.urlList.getWeekInfo)
                        .then(function(response){
                             vm.yearWeekStr = response.data.toString();
                        });
            },
            //初始化时间插件
            initDateComponents(){
                  //会计月param
                  var moneyMonthParam = {
                              minDate : this.minMoneyMonth,//最小日付
                              maxDate : this.maxMoneyMonth,//最大日付
                              startDate : this.startMoneyMonth,//黙認開始日付
                              endDate : this.endMoneyMonth,//黙認終了日付
                              yearMonthShow:true,//****自然月表示設定
                              endYear:true,//****自然月表示設定
                              showYearDropdowns:true,//****自然月表示設定
                              //maxMoneyYearMonth:'201702',//昨日付けの会計月
                              //minMoneyYearMonth:'200707',//最小会計月
                              autoApply:true,
                              locale : {
                                    format:"YYYYMM",
                                    separator : ' ~ ',
                                    applyLabel : '確定1111',
                                    cancelLabel : 'キャンセル',
                                    monthNames : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ]
                              }
                        }
                  window.$('#kuaijimonth_btn').daterangepicker(moneyMonthParam);
                  //自然月param
                  var monthParam = {
                              maxDate:this.maxMonth,//最大日付
                              minDate:this.minMonth,//最小日付
                              startDate: this.startMaxMonth,//黙認開始日付
                              endDate: this.endMaxMonth,//黙認終了日付
                              yearMonthShow:true,//****自然月表示設定
                              endYear:true,//****自然月表示設定
                              showYearDropdowns:true,//****自然月表示設定
                              autoApply:true,
                              locale : {
                                    format:"YYYYMM",
                                    separator : ' ~ ',
                                    applyLabel : '確定1111',
                                    cancelLabel : 'キャンセル',
                                    monthNames : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ]
                              }
                        }
                  window.$('#ziranmonth_btn').daterangepicker(monthParam);
                  //周param
                  var weekParam = {
                              maxDate:this.maxWeek,//最大日付
                              minDate:this.minWeek,//最小日付
                              startDate:this.startWeek,//黙認開始日付
                              endDate:this.endWeek,//黙認終了日付
                              showDropdowns : true, //年、月DropList表示OK
                              showWeekNumbers:true,//週情報表示
                              autoApply:true,//[確定]、[キャンセル]が表示しない設定
                              weekSelect:true,//年週クリック有効
                              yearWeekStr:this.yearWeekStr,//[Smartで年週関係リスト洗替]
                              locale : {
                                    format:"YYYYWW",
                                    separator : ' ~ ',
                                    applyLabel : '確定',
                                    cancelLabel : 'キャンセル',
                                    daysOfWeek : [ '日', '月', '火', '水', '木', '金 ', '土' ],
                                    monthNames : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
                                    weekLabel :'週',
                                    firstDay : 1 //月開始
                              }
                        }
                  window.$('#week_btn').daterangepicker(weekParam);
                  //日param
                  var dayParam = {
                              maxDate:this.maxDay,//最大日付
                              minDate:this.minDay,//最小日付
                              startDate:this.startDay,//黙認開始日付
                              endDate:this.endDay,//黙認終了日付
                              showDropdowns : true, //年、月DropList表示OK
                              autoApply:true,//[確定]、[キャンセル]が表示しない設定
                              locale : {
                                    format:"YYYYWW",
                                    separator : ' ~ ',
                                    applyLabel : '確定',
                                    cancelLabel : 'キャンセル',
                                    daysOfWeek : [ '日', '月', '火', '水', '木', '金 ', '土' ],
                                    monthNames : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
                                    weekLabel :'週',
                                    firstDay : 1 //月開始
                              }
                        }
                  window.$('#day_btn').daterangepicker(dayParam);
            },

      },
      mounted(){
            //钩子函数,一般是页面初始化完成后再对dom节点进行相关操作
            this.getInitDate()
            this.getWeekDateInfo()
            this.initDateComponents()
      }
};
</script>
<style scoped>
.model_kikanAxis_kuaijimonth{
    width: 182px;
    margin-left: -20px;
}
.spanDateDiv {
   margin-left: -20px;
   font-size: 14px;
   line-height: 34px;
}
.model_kikanAxis_ziranmonth{
    width: 182px;
    margin-left: -20px;
}
.model_kikanAxis_week{
    width: 182px;
    margin-left: -20px;  
}
.model_kikanAxis_day{
    width: 182px;
    margin-left: -20px;  
}
</style>